<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="header">
          <el-form ref="form" :rules="rules" :model="xzglform" label-width="100px" class="flex">
            <el-form-item label="所属网点" prop="networkNameId">
              <el-select v-model="xzglform.networkNameId" placeholder="请选择网点" style="width:286px">
                <el-option v-for="(item,index) in xzglnetworkList" :key="index" :label="item.networkName" :value="item.networkName" />

              </el-select>
            </el-form-item>
            <el-form-item label="账户类型">
              <el-select v-model="xzglform.accountType" placeholder="请选择账户类型" style="width:286px">
                <el-option v-for="(item,index) in zhtype" :key="index" :label="item.label" :value="item.value" />

              </el-select>
            </el-form-item>
            <el-form-item label="账户名称">
              <el-input v-model="xzglform.accountName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="账户状态">
              <el-select v-model="xzglform.accountStatus" placeholder="请选择账户状态" style="width:286px">
                <el-option label="全部" :value="0" />
                <el-option label="开启" :value="1" />
                <el-option label="关闭" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button class="cx" @click="xzglcx">查询</el-button>
              <elbutton :obj="xzglform" @dj="xzglcz" />

            </el-form-item>
            <el-form-item label="警戒金额">
              <el-select v-model="xzglform.warningAmountId" placeholder="请选择警戒金额" style="width:286px">
                <el-option label="全部" :value="0" />
                <el-option label="余额小于警戒金额" :value="1" />
                <el-option label="余额大于警戒金额" :value="2" />
                <el-option label="余额等于警戒金额" :value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="管控金额">
              <el-select v-model="xzglform.controlledAmountId" placeholder="请选择管控金额" style="width:286px">
                <el-option label="全部" :value="0" />
                <el-option label="余额小于管控金额" :value="1" />
                <el-option label="余额大于管控金额" :value="2" />
                <el-option label="余额等于管控金额" :value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="加盟方式">
              <el-select v-model="xzglform.joinType" placeholder="请选择加盟方式" style="width:286px">
                <el-option label="全部" :value="0" />
                <el-option label="直营" :value="1" />
                <el-option label="非直营" :value="2" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <div class="page">
          当前页共<span>{{ xzgltableData.length }}</span>项
        </div>
      </el-col>
      <el-col :span="2">
        <div>
          <el-button class="cx">查询</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between">
      <el-col :span="24">
        <elltable :loading="xzglloading" :data="xzgltableData" :th="xzglth" :n="3" />
      </el-col>
    </el-row>
    <div class="block" style="display: flex; justify-content: flex-end;">
      <pagination :current-page="xzglform.pageDate.pageNum" :page-size="xzglform.pageDate.pageSize" :total="xzgltotal" @size-change="xzglhandleSizeChange" @current-change="xzglhandleCurrentChange" />
    </div>
  </div>
</template>
<script>
import { getOutletsList } from '@/api/dashboard'
import { Getxjgltable } from '@/api/site'
export default {
  props: {
    zhtype: Array,
    rules: Object
  },
  data() {
    return {
      xzglloading: false,
      // 网点列表
      xzglnetworkList: [],
      // 下载管理账单
      xzglform: {
        accountName: '',
        accountStatus: '',
        accountType: '',
        controlledAmountId: '',
        joinType: '',
        networkNameId: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        warningAmountId: ''
      },
      xzgltableData: [],
      xzgltotal: 0,
      xzglth: []
    }
  },
  async created() {
    this.getOutLet()
  },
  methods: {
    // 获取网点列表
    getOutLet() {
      getOutletsList().then((res) => {
        if (res.code === 200) {
          this.xzglnetworkList = res.data
        }
      })
    },

    // 下载账户管理查询
    async xzglcx() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.xzglloading = true
          const res = await Getxjgltable(this.xzglform)
          console.log('下载管理查询', res)
          this.xzglloading = false
          if (res.code === 200) {
            this.xzgltableData = res.data.list.data
            this.xzgltotal = res.data.list.total
            this.xzglth = res.data.fields
          } else {
            this.xzgltableData = []
            this.xzgltotal = 0
          }
        } else {
          return false
        }
      })
    },
    // 下载账户管理分页
    xzglhandleSizeChange(val) {
      this.xzglform.pageDate.pageSize = val
      this.xzglform.pageDate.pageNum = 1
      this.xzglcx()
    },
    xzglhandleCurrentChange(val) {
      this.xzglform.pageDate.pageNum = val
      this.xzglcx()
    },
    xzglcz(aaa) {
      this.xzglform = aaa
    }
  }
}
</script>
<style lang="scss" scoped>
@import url("../css/css.css");
</style>
